<template>
    <div class="box">
        <div class="loginPlan">
            <h1>登录</h1>
            <div>
                <input type="text" class="login-input" v-model="name" placeholder="用户名">
            </div>
            <div>
                <input type="password" class="login-input" v-model="password" placeholder="输入密码">
            </div>
            <div>
                <button class="login-btn" @click="login">登录</button>
            </div>
<!--            <div class="find-pwd">-->
<!--                <router-link to="/findpwd">忘记密码&gt;&gt;</router-link>-->
<!--            </div>-->
            <div>
                    <el-button
                            @click="dialogFormVisible2 = true"
                            type="text"
                            size="small">
                        找回密码
                    </el-button>
            </div>
            <el-dialog title="重置密码" :visible.sync="dialogFormVisible2">
                <el-form :model="form2" style="height: 100px;">
                    <el-form-item label="身份证:" :label-width="formLabelWidth" class="form-button">
                        <el-input v-model="form2.idcard" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" :label-width="formLabelWidth" class="form-button">
                        <el-input v-model="form2.name" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="zhaomima" style="width: 80px ;height: 40px;">确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                name: '',
                password: '',
                bodyHeight: window.innerHeight + 'px',
                dialogFormVisible2: false,
                form2:{
                    name:'',
                    idcard:''
                },
                formLabelWidth: '120px',
            }
        },
        // mounted (){
        //     let that = this;
        //     window.onresize = ()=>{
        //         that.bodyHeight = window.innerHeight + 'px';
        //     }
        // },
        methods: {
            zhaomima(){
                this.$axios({
                    method:'post',
                    url:'/api/employee/findPWD',
                    data:this.qs.stringify({
                        idcard: this.form2.idcard,
                        name: this.form2.name,
                    })
                }).then(res=>{
                    console.log(res)
                    alert('你的密码是：'+res.data.password)
                }).catch(err=>{
                    console.log('错误',err)
                })
            },
            login() {
                // this.$router.push('/home')
                // 提交登录数据到后台服务器，要求实现，登录成功，跳转到HOME，不成功，提示失败。
                // console.log(this.password)
                this.$axios({
                    method: 'post',
                    url: '/api/employee/login',
                    data: this.qs.stringify({
                        name:this.name,
                        password:this.password,
                    })
                })
// then()中的回调函数中的this，不是指向VUE组件实例化对象。
                    .then((res) => {
                        // console.log(this);
                        console.log(res);
                        // console.log(res.data);
                        if (res.data.status === 200) {

                            //登录成功，弹出消息；
                            //进行本地存储：
                            // sessionStorage.setItem('users', JSON.stringify(res.data.data[0]));
                            // sessionStorage.setItem('token', res.data.token);
                            //表示登录成功
                                this.$router.push('/home');

                        } else {

                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })

                        }
                    });
              /*  this.$axios({
                    url: '/api/login',
                    // post 请求，data可以直接传对象：
                   /!* method: 'get',
                    params: {
                        'username': this.username,
                        'password': this.password
                    }*!/
                     method: 'post',
                     data:{
                        'username': this.username,
                        'password': this.password
                    }
                }).then((res) => {
                    console.log(
                        res
                    );
                    alert(res.data.msg)
                })*/
            }
        }
    }
</script>

<style scoped lang="less">
    .box {
        /*width: 100%;*/
        background-color: #000;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*border:hidden;*/
    }

    .loginPlan {
        width: 450px;
        height: 400px;
        border-radius: 3px;
        overflow: hidden;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;

        & > h1 {
            color: #5f5f5f;
            margin-top: 30px;
            margin-bottom: 20px;
            font-size: 30px;
            font-weight: normal;
        }
    }

    .login-input {
        width: 75%;
        height: 35px;
        line-height: 35px;
        text-indent: 10px;
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 3px;
        border: 1px solid rgba(231, 231, 231, 0.89);
    }

    .login-btn {
        width: 75%;
        height: 40px;
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 3px;
        background-color: #0d9019;
        color: white;
        border-width: 0;
    }

    .find-pwd {
        width: 75%;
        margin: 0 auto;
        text-align: right;

        & > a {
            font-size: 14px;

            &:link, &:visited {
                text-decoration: none;
                color: #0d9019;
            }

            &:hover {
                text-decoration: none;
                color: #12c222;
            }
        }
    }
</style>
